<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="zy_form">
			<view class="sk_money">
				<view class="sk_money_title">提现金额</view>
				<view class="sk_money_bum">
					<input type="number"  placeholder="请输入余额" maxlength="140" v-model="money"/>
				</view>
			</view>
			<view class="pay_type">
				<view class="pay_title">收款方式</view>
				
				<view class="type">
					<uv-radio-group v-model="state">
						<uv-radio
							shape="square"
							:customStyle="{margin: '8px'}" 
							v-for="(item, index) in payType" 
							:key="index" 
							:disabled="item.disabled"
							:label="item.name" 
							@change="typeChage(index)"
							:name="item.id">
						</uv-radio>
					</uv-radio-group>
				</view>
			</view>
			<view class="pay_type">
				<view class="pay_title">可提现佣金:{{canDraw}}</view>
			</view>
<!-- 			<view class="rowHW sk_account" @click="skClick"> 
				提现审核记录
				<view>
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view> -->
			<view class="tip">余额最少:0,最多:10000,倍数:0,手续费:0%</view>
			<view  class="buies">
				<button  type="default" plain="true" @click="withdraw">提交审核通过后发放</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { drawInfo ,draw} from '../../api/user';
	export default{
		data(){
			return{
				navstyle: {
					title: "提现",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				titleStyle: {
					fontWeight: 700
				},
				userform:{
					radiovalue:"true"
				},
				bankInfo:[],
				payType:[
					{
						name:'支付宝',
						id:-2,
						disabled:false,
					},
					{
						name:'微信',
						id:-1,
						disabled:false,
					},
					{
						name:'银行卡',
						id:0,
						disabled:false,
					}
				],
				state:-3,
				canDraw:0,
				bankData:{},
				wxData:{},
				alipayData:{},
				money:0,
			}
		},
		mounted() {
			drawInfo().then(response=>{
				console.log(response);
				this.bankData = response.data.bankinfo.bank;
				this.wxData = response.data.bankinfo.wx;
				this.alipayData = response.data.bankinfo.alipay;
				this.canDraw =  response.data.canDraw
				// this.onlineFee  = response.data.online_fee;
				if(this.bankData.status == 0){
					this.payType[2].disabled = true
				}else{
					this.payType[2].disabled = false
					this.payType[2].id = this.bankData.id
				}
				if(this.wxData.status == 0){
					this.payType[1].disabled = true
				}else{
					this.payType[1].disabled = false
					this.payType[1].id = this.wxData.id
				}
				if(this.alipayData.status == 0){
					this.payType[0].disabled = true
				}else{
					this.payType[0].disabled = false
					this.payType[0].id = this.alipayData.id
				}
				
			})
		},
		methods:{
			typeChage(item){
				console.log(item);
				this.state = this.payType[item].id;
				// if(item == 3){
				// 	this.typeFlag = true
				// }else{
				// 	this.typeFlag = false
				// }
			},
			leftClick() {
				uni.reLaunch({
				  url: '/pages/user/money' 
				});
			},
			skClick(){
				uni.navigateTo({
					url:'/pages/user/extract_recod'
				})	
			},
			withdraw(){
				console.log(this.state);
				if(this.money<1){
					uni.showToast({
						title: "请输入提现金额",
						icon: "error",
						duration: 2000
					});
					return
				}
				if(this.state<1){
					uni.showToast({
						title: "请选择收款方式",
						icon: "error",
						duration: 2000
					});
					return
				}
				if(this.money>this.canDraw){
					uni.showToast({
						title: "提现金额大于可用佣金",
						icon: "error",
						duration: 2000
					});
					return
				}
				draw({id:this.state,money:this.money}).then(Response=>{
					console.log(Response);
					if(Response.code==1){
						uni.showToast({
							title: Response.msg,
							duration: 1500
						});
						setTimeout(()=>{
							uni.reLaunch({
							  url: '/pages/user/money' // 替换成上一页的路径
							});
												
						},2000)
					}else{
						uni.showToast({
							title: Response.msg,
							duration: 2000
						});
					}
				})
				
			}
		}
	}
</script>

<style>
	.page{
		width: 100%;
		height: 100%;
	    background-color: #fafafa;
	}
	.zy_form {
	    display: flex;
	    flex-direction: column;
	}
	
	.sk_money {
	    display: flex;
	    flex-direction: column;
	    background-color: #fff;
	    padding: 10px;
	}
	.sk_money_bum {
	    display: flex;
	}
	.sk_money_bum input{
	    font-size: 40px;
	    font-weight: 700;
	}
	.sk_money_title {
	    color: #a8a8a8;
	}
	.pay_title{
	    font-weight: 700;
	}
	.uni-list-cell {
		background: #fff;
		height: 50px;
	    border-bottom: #efefef 1px solid;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    font-size: 14px;
	}
	.uni-list-cell-left{
	    font-size: 15px;
	    font-weight: 700;
	    padding: 0 15px;
	}
	.werste .uni-input{
	    box-shadow: 0 0 4px #f0f0f0;
	    border-radius: 50px;
	    width: 230px;
	    margin-right: 10px;
	    border: 1px solid #dedddd;
	    height: 34px !important;
	}
	.pay_type {
	    display: flex;
	    flex-direction: column;
	    align-items: left;
	    width: 95%;
	    padding: 10px;
	    background-color: #fff;
	    margin: 10px auto 10px auto;
	    border-radius: 10px;
	    height: auto;
	}
	.uni-title {
	    font-size: 15px;
	    font-weight: 500;
	    padding: 10px 15px;
	    line-height: 1.5;
	}
	.uni-textarea {
	    width: 88%;
	    background: #fff;
	    margin: 0 auto;
	    border: 1px solid #e8e5e5;
	    padding: 5px 10px;
	}
	.rowHW{
	    padding: 15px 10px;
	    border-bottom: 1px solid #f1f1f1;
	}
	.sk_account {
	    display: flex;
	    flex-direction: row;
	    background-color: #fff;
	    align-items: center;
	    padding: 10px;
	    justify-content: space-between;
	}
	.tip {
	    font-size: 14px;
	    padding: 5px 10px;
	    color: #9d6e00;
	    text-align: center;
	}
	.buies {
		margin-top: 10px;
		margin-bottom: 32px;
	}
	.buies button {
	    color: #fff;
	    border-radius: 53px;
	    background: linear-gradient(135deg, #d66c6b, #ed6266);
	    margin: 15px auto;
	    width: 60%;
	    font-size: 14px;
	    border: none;
	}
</style>